
<template>
  <div>
      <el-button size="small" type="" @click="addItem">新增</el-button>

    <el-table
    border
   :data="active_component.propValue.list" style="width: 100%;margin-top: 10px;">
      <el-table-column type="expand">
      <template slot-scope="scope">
        <el-form label-position="left" inline class="demo-table-expand" style="padding:10px;">
          <div v-for="(item,i) of scope.row.imgList" :key="i" >
             <el-form-item label="图片:">
               <img :src="item.url" style="width:30px;" alt="">
              <el-input v-model="item.url"></el-input>
              <Upload :text="'上传图片'" @confrim="(e)=>{confrim(e,scope.$index,i)}" :type="'primary'"></Upload>
            </el-form-item>
            <el-form-item label="标题:">
                  <el-input v-model="item.title"></el-input>
            </el-form-item>
            <el-form-item label="内容:">
                  <el-input v-model="item.content"></el-input>
            </el-form-item>
             <el-form-item label="链接:">
                  <el-input v-model="item.link"></el-input>
            </el-form-item>
          </div>
          <el-button type="success" size="small" @click="addSubItem(scope.$index)">新增</el-button>
          <el-button type="danger" size="small" @click="deleteSubItem(scope.$index, i)">删除</el-button>
        </el-form>
      </template>
    </el-table-column>
     <el-table-column prop="title"   label="切换按钮文字" >
        <template slot-scope="scope" min-width="100">
            <el-input v-if="scope.row.imgList" v-model="scope.row.title"></el-input>
        </template>
      </el-table-column>
        <el-table-column prop="title" label="颜色" min-width="20">
         <template slot-scope="scope">
              <el-color-picker  v-if="scope.row.imgList"  v-model="active_component.propValue.btnActiveColor" show-alpha></el-color-picker>
        </template>
        </el-table-column>
      <!-- <el-table-column prop="url" label="图片" width="180">
         <template slot-scope="scope" v-if="!scope.row.imgList">
            <img :src="scope.row.url" style="width:30px;" alt="">
            <el-input v-model="scope.row.url"></el-input>
            <Upload :text="'上传图片'" @confrim="(e)=>{confrim(e,scope.row.url)}" :type="'primary'"></Upload>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题">
         <template slot-scope="scope" v-if="!scope.row.imgList">
            <el-input v-model="scope.row.title"></el-input>
        </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
         <template slot-scope="scope" v-if="!scope.row.imgList">
            <el-input v-model="scope.row.content"></el-input>
        </template>
        </el-table-column> -->
          <!-- <el-table-column prop="content" label="操作">
         <template slot-scope="scope" v-if="!scope.row.imgList">
              <el-button size="small" type="primary" @click="addSubItem(scope.row)">新增</el-button>
        </template>
        </el-table-column> -->
    </el-table>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
 import Upload from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload },
  data() {
    return {
      name: "",
      tabIndex: 0,
      btnitem:'',
      active_component: {},
    };
  },
  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },
  methods: {
    // 点击删除
        deletephoto(list,i) {
            list.splice(i,1)
        },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错 
    },
    addItem() {
      this.active_component.propValue.list.push( {
                title:'网站模板1',imgList:[],
                active:true,
            },);
    },
    addSubItem(prentIndex){
        console.log(prentIndex);
            this.active_component.propValue.list[prentIndex].imgList.push({
                url:'https://ejartest.oss-cn-chengdu.aliyuncs.com/image/muban_pic.png',
                title:new Date().getTime(),
                link:'',
                content:'xxxx',
                active:false,
            })
    },
    deleteSubItem(Index, i) {
        console.log(Index);
        this.active_component.propValue.list[Index].imgList.splice(i, 1)
    },
    // deleteItem(i){
    //     this.active_component.propValue.list.splice(i,1)
    // },
    // addBtnitem(i){
    //      this.active_component.propValue.list[i].btnlist.push(this.btnitem)
    // },
    confrim(e, pindex,index) {
        this.active_component.propValue.list[pindex].imgList[index].url=e
        // url= e;
    //    for(let key in this.active_component.propValue.list){
    //         if(this.active_component.propValue.list[key].title==row.title){
    //             this.active_component.propValue.list[key].imgList.push({
    //                 url:'https://ejartest.oss-cn-chengdu.aliyuncs.com/image/muban_pic.png',
    //                 title:new Date().getTime(),
    //                 content:'xxxx'
    //             })
    //         }
    //     }
    },
    closeTK() {
      this.$emit("closeTK");
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
     pushcanvas() {
      if (this.activeCompont) {
        //  this.$store.commit('setComponentData',this.$store.state.componentData)
        this.$emit("closeTK"); //关闭弹框
      } else {
           let TabSwitchcardList=JSON.parse(localStorage.getItem('TabSwitchcardListImg'))?JSON.parse(localStorage.getItem('TabSwitchcardListImg')):[]
           let themeBtnClass = "TabImgSwitchcard_box_" + new Date().getTime()
           let item={
                Tabclass:'TabImgSwitchcard_box'+new Date().getTime(),
                themeBtnClass:themeBtnClass,
                class:'TabImgSwitchcard_con'+new Date().getTime(),
                activeBg:this.active_component.propValue.btnActiveColor,
            }
           TabSwitchcardList.push(item)
          localStorage.setItem('TabSwitchcardListImg',JSON.stringify(TabSwitchcardList))

        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
         this.active_component.propValue.themeBtnClass = themeBtnClass
        component.style.top = Number(canvasStyle.height);
        component.style.left = 0;

        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }

      //     }
      //   }
    },
  },
};

</script>

<style>
</style>
